<template>
    <div class="box" ref="box">
        <div  class="content" v-for="(v,i) in newprop" :key="i" >
            <p style="font-weight:bold">{{v.coverTitle}}</p>
            <div class="content-inner" @click="xiangqing(v)">
                <img :src="v.recipe.image" alt="">
                <div class="info">
                    <p>{{v.recipe.title}}</p>
                    <p>作者：{{v.recipe.clientName}}</p>
                    <p>{{v.recipe.clientId}}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        newprop:Array,
    },
    data() {
        return {
            clientId:0,
            //pageIndex:0,
            pageSize:10,
        }
    },
     mounted() {
      window.addEventListener("scroll",this.handleScroll); 
    },
    methods:{
        xiangqing(e){
            //window.console.log(e)
            this.clientId=e
             this.$router.push({
                path: '/Qxiangqing',
                query: {
                    clientId:this.clientId,
                    title:this.title
                }
          })
      },
      // 监听页面滚动
        handleScroll() {
            //判断到底部的等式: scrollTop+windowHeight=scrollHeight;
            //变量scrollTop是滚动条滚动时，距离顶部的距离
            var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            //变量windowHeight是可视区的高度
            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //变量scrollHeight是滚动条的总高度
            var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
            if(scrollTop+windowHeight==scrollHeight){
                //写后台加载数据的函数
            window.console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
            this.pageSize=this.pageSize+10
           // window.console.log(this.pageSize)
            this.$emit('childByValue', this.pageSize)
            }   
        },
    }
}
</script>
<style scoped>
    .box{width: 100%}
    .content{width:90%;margin: .2rem auto}
    .content-inner{width: 100%;display: flex;background-color: #FCEBF3;padding: .06rem;align-items: center}
    .content-inner img{width: .8rem}
    .content-inner .info{margin-left: .1rem}
</style>